/**
 * 二维码扫码
 */

import { Button, Form, Input, message, Modal } from "antd";
import { FC, useEffect, useState } from "react";
import { getGbSystemSetSetQrCode } from "../../api";

interface IFieldType {
  cardNum: string; //序列号
}

const ErweimaSaoma: FC<{
  data: string; // 序列号
  id: React.Key;
  handleCallback: () => void;
}> = ({ data, id, handleCallback }) => {
  const [form] = Form.useForm<IFieldType>();

  const [setErweimaShow, setSetErweimaShow] = useState(false); // 二维码扫码弹窗

  useEffect(() => {
    if (data) {
      form.setFieldValue("cardNum", data);
    }

    return () => {};
  }, [data, form]);


  const handleOk = async () => {
    const values = await form.validateFields();
    const { code, msg } = (await getGbSystemSetSetQrCode({
      id,
      cardNum: values.cardNum,
    })) as { code: number; msg: string };
    if (code === 20000) {
      message.success('设置成功');
      setSetErweimaShow(false);
      handleCallback()
    } else {
      message.error(msg);
    }
  };

  const handleCancel = () => {
    setSetErweimaShow(false);
  };
  return (
    <div className="table-box">
      <div className="item-title">
        <div>磅房二维码扫码器设置</div>
        <Button
          type="link"
          onClick={() => {
            setSetErweimaShow(true); // 二维码扫码弹窗
          }}
        >
          设置参数
        </Button>
      </div>
      <div className="item-table">
        <div className="item-table-head">
          <div style={{ flex: 2 }}>序列号</div>
        </div>
        <div className="item-table-data">
          <div className="flex1" style={{ flex: 2 }}>
            {data}
          </div>
        </div>
      </div>
      <Modal
        title="扫码器设备编号"
        closable={{ "aria-label": "Custom Close Button" }}
        open={setErweimaShow}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          form={form}
        >
          <Form.Item<IFieldType>
            label="序列号"
            name="cardNum"
            rules={[{ required: true, message: "请填写设备序列号!" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ErweimaSaoma;
